error-page 错误页面

error-page 错误页面

iov-error-page错误页面,iov-ui@1.2.35 起支持。

属性说明

属性名 类型 默认值 必填 说明
status String 需要展示的错误类型
errImg String https://bce.bdstatic.com/doc/bd-idg-clw-xiaoduzhushou/Paper/networkerror_82d18c3.png 自定义错误图片
binderrBtn Function 点击按钮的回调

status取值

networkDisconnect: '0', // 无网络自定义码
errorLocation: '1', // 地理位置错误
noLocationPermission: '2', // 未打开位置授权
emptyData: '3', // 空数据
serverError: '4', // 服务器发生错误
phoneError: '5', // 手机号发生错误
loginError: '6', // 登录手百发生错误
orderError: '7', // 无订单
otherError: '8' // 其它错误

示例

json:

{
    "navigationBarTitleText": "智慧停车",
    "navigationStyle": "",
    "usingComponents": {
        "iov-titlebar": "iov-ui/lib/solution-titlebar/index",
        "error-page": "iov-ui/lib/error-page/index",
        "iov-layout": "iov-ui/lib/solution-card-layout/index",
        "iov-tabs": "iov-ui/lib/tabs/index"
    },
    "window": {
        "left": 90,
        "top": 120,
        "right": 1280,
        "bottom": 1040,
        "showStyle": 1
    }
}

swan:

<iov-layout type="normal">
    <iov-titlebar slot="titlebar" showback="{{ true }}" bindrighticon="clickIcon" rightIcon="set-democar">
        <iov-tabs
            slot="filter"
            direction="horizontal"
            bindtabchange="tabchange"
            tabs="{{ tabs }}"
            active-name="0"
        ></iov-tabs>
    </iov-titlebar>
    <view class="wrap" slot="content">
        <error-page
            status="{{ status }}"
            errImg="{{ errImg }}"
            binderrBtn="errBtn"
        ></error-page>
    </view>
</iov-layout>

js:

/**
 * @file
 * @author
 */
/* globals Page, swan */

Page({
    // eslint-disable-line
    data: {
        tabs: [
            {
                name: '0',
                label: '0'
            },
            {
                name: '1',
                label: '1'
            },
            {
                name: '2',
                label: '2'
            },
            {
                name: '3',
                label: '3'
            },
            {
                name: '4',
                label: '4'
            },
            {
                name: '5',
                label: '5'
            },
            {
                name: '6',
                label: '6'
            },
            {
                name: '7',
                label: '7'
            },
            {
                name: '8',
                label: '8'
            }
        ],
        loading: false,
        status: '0',
        errImg: 'https://bce.bdstatic.com/doc/bd-idg-clw-xiaoduzhushou/Paper/nocontent_62514d2.png'
    },
    onInit(query) {},
    async onLoad(query) {},
    clickIcon(e) {
        console.log('点击了solution-titlebar右侧的图标...');
    },
    tabchange(e) {
        this.setData({
            status: e.name
        });
    },
    errBtn(e) {
        console.log('点击了错误页面按钮...');
    }
});

less:

.wrap {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 1.04rem 0;
    width: 100%;
    height: 100%;
}
solution-titlebar 轻卡片标题栏solution-card 轻卡片列表